<template>
    <!--地图挂载dom-->
    <div id=map>
    </div>
</template>

<script>
    //引入依赖
    import {OSM} from 'ol/source';
    import Map from 'ol/Map';
    import VectorSource from 'ol/source/Vector';
    import View from 'ol/View';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Circle, Fill, Stroke, Style} from 'ol/style';
    import {fromLonLat} from 'ol/proj';
    import Projection from 'ol/proj/Projection';
    export default {
        name: "VectorFeatureLayer",
        data() {
            return {}
        },
        mounted() {
            //静态矢量数据
            var geojson = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                87.16552734375,
                                39.470125122358176
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "LineString",
                            "coordinates": [
                                [
                                    79.16748046874999,
                                    37.61423141542417
                                ],
                                [
                                    81.27685546875,
                                    42.00032514831621
                                ],
                                [
                                    84.111328125,
                                    41.52502957323801
                                ],
                                [
                                    84.66064453125,
                                    43.229195113965005
                                ]
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [
                                [
                                    [
                                        81.71630859375,
                                        40.49709237269567
                                    ],
                                    [
                                        82.0458984375,
                                        37.21283151445594
                                    ],
                                    [
                                        86.220703125,
                                        36.59788913307022
                                    ],
                                    [
                                        86.06689453125,
                                        41.04621681452063
                                    ],
                                    [
                                        81.71630859375,
                                        40.49709237269567
                                    ]
                                ]
                            ]
                        }
                    }
                ]
            };
            /**
             *矢量几何要素的样式
             */
            var image = new Circle({
                radius: 5,
                fill: null,
                stroke: new Stroke({ color: 'red', width: 1 })
            });
            var styles = {
                'Point': [
                    new Style({
                        //点样式
                        image: image
                    })
                ],
                'LineString': [
                    new Style({
                        stroke: new Stroke({
                            //线的边界样式
                            color: 'green',
                            width: 1
                        })
                    })
                ],
                'MultiLineString': [
                    new Style({
                        stroke: new Stroke({
                            //多线的边界样式
                            color: 'green',
                            width: 1
                        })
                    })
                ],
                'MultiPoint': [
                    new Style({
                        //多点的点样式
                        image: image
                    })
                ],
                'MultiPolygon': [
                    new Style({
                        stroke: new Stroke({
                            //多区的边界样式
                            color: 'yellow',
                            width: 1
                        }),
                        fill: new Fill({
                            //多区的填充样式
                            color: 'rgba(255, 255, 0, 0.1)'
                        })
                    })
                ],
                'Polygon': [
                    new Style({
                        stroke: new Stroke({
                            //区的边界样式
                            color: 'blue',
                            lineDash: [4],
                            width: 3
                        }),
                        fill: new Fill({
                            //区的填充样式
                            color: 'rgba(0, 0, 255, 0.1)'
                        })
                    })
                ],
                'GeometryCollection': [
                    new Style({
                        stroke: new Stroke({
                            //集合要素的边界样式
                            color: 'magenta',
                            width: 2
                        }),
                        fill: new Fill({
                            //集合要素的填充样式
                            color: 'magenta'
                        }),
                        image: new Circle({
                            //集合要素的点样式
                            radius: 10,
                            fill: null,
                            stroke: new Stroke({
                                color: 'magenta'
                            })
                        })
                    })
                ],
                'Circle': [
                    new Style({
                        stroke: new Stroke({
                            //圆的边界样式
                            color: 'red',
                            width: 2
                        }),
                        fill: new Fill({
                            //圆的填充样式
                            color: 'rgba(255,0,0,0.2)'
                        })
                    })
                ]
            };
            var styleFunction = function (feature) {
                //根据要素类型设置几何要素的样式
                return styles[feature.getGeometry().getType()];
            };
            //设置地图投影
            var projection = new Projection({
                code: 'EPSG:3857',//投影编码
                units: 'degrees',
            });
            //定义geojson的数据格式
            let geoJSON = new GeoJSON();
            //读取要素数据
            let featrue = geoJSON.readFeatures(geojson,{
                featureProjection: projection
            });
            //给数据源添加要素
            const vectorSource = new VectorSource();
            vectorSource.addFeatures(featrue);
            //构建矢量图层
            const vector = new VectorLayer({
                //矢量数据源
                source: vectorSource,
                //样式设置
                style: styleFunction
            });
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                    vector
                ],
                //配置视图
                view: new View({
                    center: fromLonLat([87.16552734375, 39.470125122358176]),
                    zoom: 5,
                    projection: "EPSG:3857", //指定投影
                })
            });
        },
    }
</script>

<style scoped>

</style>